<template>
  <div class="all">
    <van-nav-bar
      fixed
      safe-area-inset-top
      title="地图找房"
      left-arrow
      @click-left="back"
    />
    <div id="app">
      <div class="amap-page-container">
        <el-amap
          vid="amapDemo"
          :center="center"
          :zoom="zoom"
          class="amap-demo"
          pitch-enable="false"
        >
          <el-amap-marker
            v-for="(marker, index) in markers"
            :key="index"
            :events="marker.events"
            :position="marker.position"
          />
          <el-amap-info-window
            v-if="window"
            :position="window.position"
            :visible="window.visible"
            :content="window.content"
            :offset="window.offset"
            :close-when-click-map="true"
            :is-custom="true"
          >
            <div id="info-window">
              <img :src="window.image">
              <div class="intrduce">
                <div class="title1">{{ window.address }}</div>
                <div class="title2">
                  <span>{{ window.rentalWay }}</span><span>{{ window.houseType }}</span><span>{{ window.roomAcre }}</span><span>{{ window.floor }}</span>
                </div>
                <div class="title2">
                  <van-icon name="location" size="12px" />{{ window.distance }}
                </div>
                <div class="tips">
                  <span>{{ window.rentalWay }}</span>
                  <span>{{ window.paymentMethod }}</span>
                  <span>{{ window.houseType }}</span>
                </div>
                <div class="title3">{{ window.price }}</div>
              </div>
              <div class="detail" @click="checkDetail(window.roomId)">
                查看详情
              </div>
            </div>
          </el-amap-info-window>
        </el-amap>
      </div>
    </div>
  </div>
</template>

<script>
import { getHouselist } from '../../apis/house.js'
import { getDisarea } from '../../apis/map.js'
import local from '../../utils/local'
export default {
  data() {
    return {
      data: [],
      zoom: 10,
      center: ['104.066301', '30.572961'],
      markers: [],
      windows: [],
      window: '',
      currentPage: 1,
      perPage: 1000
    }
  },
  created() {
    // getDisarea({
    //   key: this.$AMapkey,
    //   keywords: local.get('city'),
    //   subdistrict: 2
    // }).then((res) => {
    //   this.center = res.data.districts[0].center.split(',')
    // })
  },
  mounted() {
    this.point()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    point() {
      const markers = []
      const windows = []
      const that = this
      getHouselist({
        citycode: local.get('citycode'),
        currentPage: this.currentPage,
        perPage: this.perPage
      }).then((response) => {
        JSON.parse(JSON.stringify(response))
        response.result.list.forEach((e) => {
          let a = {}
          a.position = `${e.lng},${e.lat}`
          a.address = e.subdistrict
          a.image = e.image
          a.rentalWay = e.rentalWay
          a.houseType = e.houseType
          a.roomAcre = e.roomAcre
          a.floor = e.floor
          a.distance = e.distance
          a.paymentMethod = e.paymentMethod
          a.price = e.price
          a.roomId = e.roomId
          that.data.push(a)
          a = {}
        })
        this.data = JSON.parse(JSON.stringify(this.data))
        this.data.forEach((e, index) => {
          markers.push({
            position: e.position.split(','),
            // icon:item.url, //不设置默认蓝色水滴
            events: {
              click() {
                // 方法：鼠标移动到点标记上，显示相应窗体
                that.windows.forEach((window) => {
                  window.visible = false // 关闭窗体
                })
                that.window = that.windows[index]
                that.$nextTick(() => {
                  that.window.visible = true
                })
              }
            }
          })
          windows.push({
            position: e.position.split(','),
            isCustom: true,
            offset: [115, 55], // 窗体偏移
            showShadow: false,
            visible: false, // 初始是否显示
            address: e.address,
            image: e.image,
            rentalWay: e.rentalWay,
            houseType: e.houseType,
            roomAcre: e.roomAcre,
            floor: e.floor,
            distance: e.distance,
            paymentMethod: e.paymentMethod,
            price: e.price,
            roomId: e.roomId
          })
        })
      })
      //  加点
      this.markers = markers
      // 加弹窗
      this.windows = windows
    },
    checkDetail(e) {
      local.set('roomId', e)
      this.$router.push({ path: '/housedetail' })
    }
  }
}
</script>

<style lang="less" scoped>
.all {
  height: 100%;
  display: flex;
  flex-direction: column;
  #app {
    flex: 1;
  }
}
.amap-page-container {
  height: 100%;
}
.amap-demo {
  height: 100%;
}

.amap-page-container {
  position: relative;
}

#info-window {
  padding: 5px;
  width: 230px;
  height: 120px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 60px;
    height: 60px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 95px;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #666;
      span {
        margin: 0 1px;
      }
    }
    .tips {
      span {
        font-size: 12px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 1px;
        border: 1px solid #7bc8db;
        background-color: #fff;
        color: #5eb9d0;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
}

.detail {
  width: 100%;
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  color: #fff;
  background-color: #45b7cb;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
</style>
